<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="我的级别" left-arrow fixed @click-left="onClickLeft" />
    <div class="level">
      <div class="level_info" @click="levelShow = true" style="display: flex;align-items: center;">当前级别: {{ name }} <img
          style="width: .25rem;height: .2rem;" src="../../../images/address-arrow-icon.png" alt=""></div>
        <div class="level_tag" :style="{'color':text_color}">{{extra_tag}}</div>
      <img :src="background" />
    </div>
    <div class="level_data" v-for="item, index in levelInfo.data_list"
      v-if="levelInfo.data_list && levelInfo.data_list.length > 0">
      <div class="level_data_img">
        <img src="../../../images/mine/icon_shuju.png" />
        {{ item.title }}
      </div>
      <div class="level_data_text">
        <div class="tips" v-if="item.desc">{{ item.desc }}</div>
        <div v-for="items, index in item.items" :key="index">
          {{ items.left_text }}{{ items.right_text }}
        </div>
      </div>
    </div>
    <div class="level_title" v-for="item, index in levelInfo.extra_list" :key="index">
      <div class="level_title_btn">
        <div class="title">{{ item.title }}</div>
        <div class="btn" @click="getLevel(item.button_key, item.level)">{{ item.button_text }}</div>
      </div>
      <div class="level_title_text" v-if="item.content" v-html="item.content.replace(/\n/g, '<br>')">
      </div>
    </div>
    
    <van-popup v-model="levelShow" position="bottom">
      <van-picker title="选择级别" value-key="name" show-toolbar :columns="options" @confirm="onConfirmBig"
        @cancel="levelShow = false" :value="cascaderValue" />
    </van-popup>
  </div>
</template>
<script>
import { LEVEL_INFO, SERVICE_BUY, USER_LEVEL_OPTIONS } from '@/api/mine'
export default {
  data() {
    return {
      levelInfo: {},
      options: [],
      levelShow: false,
      cascaderValue: '',
      background: '',
      name: '',
      level: '',
      extra_tag:'',
      text_color:''
    };
  },
  mounted() {
    window.scrollTo(0, 0)
    localStorage.removeItem('levelInfo')
    this.$http.get(USER_LEVEL_OPTIONS).then(res => {
      this.options = res.data
      this.cascaderValue = res.data[0].level
      this.background = res.data[0].background
      this.name = res.data[0].name
      this.extra_tag=res.data[0].extra_tag
      this.text_color=res.data[0].text_color
      this.getLevelInfo(res.data[0].level)
    })

  },
  methods: {
    onConfirmBig(value) {
      this.levelShow = false
      this.background = value.background
      this.name = value.name
      this.extra_tag=value.extra_tag
      this.text_color=value.text_color
      this.getLevelInfo(value.level)
    },
    getLevelInfo(level) {
      this.$http.get(LEVEL_INFO+level).then(res => {
        this.levelInfo = res.data
      })
    },
    onClickLeft() {
      this.$router.back();
    },
    getLevel(key, level) {
      if (key == 'level_buy') {
        // 去购买
        let params = {
          type: 1,
          level: level
        }
        this.$http.post(SERVICE_BUY, params).then(res => {
          this.$router.push({ path: '/levelCashier' })
          res.data.expired_time = new Date().getTime() + res.data.expired_seconds * 1000;
          localStorage.setItem('cashOrder', JSON.stringify(res.data))
        })
        //
      } else if (key == 'agent_apply') {
        this.getApplyAgent(level)
      } else if (key == 'agent_info') {
        this.getMyAgent(level)
      } else if (key == 'big_agent_apply') {
        this.getApplyAgent(level)
      } else if (key == 'big_agent_info') {
        this.getMyAgent(level)
      }
    },
    // 我的代理
    getMyAgent(level) {
      this.$router.push({ path: '/myAgent', query: { level } })
    },
    // 申请代理
    getApplyAgent(level) {
      this.$router.push({ path: '/applyAgent', query: { level } })
    }
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  min-height: 100vh;
  padding-top: 46px;
  padding-bottom: 1.2rem;
  background: #f2f4f5;
  box-sizing: border-box;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}

.level {
  position: relative;
  width: 7.02rem;
  height: 2.9rem;
  margin: 0 auto;

  .level_info {
    // width: 1.4rem;
    height: 0.44rem;
    font-size: 0.24rem;
    font-weight: 500;
    // line-height: 0.44rem;
    background: #ffffff;
    border-radius: 0px 100px 100px 0px;
    color: #333;
    padding-left: .2rem;
    padding-right: 0.18rem;
    position: absolute;
    top: 0.7rem;
  }
  .level_tag{
    position: absolute;
    bottom: .3rem;
    right:50%;
    transform: translateX(-50%);;
    font-size: 0.24rem;
    font-weight: 500;
    line-height: 0.44rem;
  }
  img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;

  }
}

.level_data {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;

  .level_data_img {
    background: #f5f7fe;
    border-radius: 8px 8px 0px 0px;
    // opacity: 0.06;
    padding: 0.2rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 0.28rem;
    // line-height: 0.4rem;
    // text-align: left;
    color: #333333;
    font-style: normal;

    img {
      width: 0.32rem;
      vertical-align: middle;
    }
  }

  .level_data_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    padding-left: 0.2rem;
    margin-top: 0.2rem;

    .tips {
      margin-bottom: 0.12rem;
      color: #F32A23;
    }
  }
}

.level_title {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  // padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;

  .level_title_btn {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.32rem;
      color: #333333;
      line-height: 0.44rem;
      text-align: left;
      font-style: normal;
    }

    .btn {
      padding: 0.1rem 0.3rem;
      background: linear-gradient(270deg, #1261E2 0%, #4A89EC 100%);
      border-radius: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 0.24rem;
      color: #ffffff;
      // line-height: 0.34rem;
      //   text-align: left;
      font-style: normal;
    }
  }

  .level_title_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    margin-left: 0.2rem;
    padding-bottom: 0.2rem;
  }
}
</style>
